<script>
import {defineComponent} from 'vue'
import WangEditor from "../../components/WangEditor.vue";

export default defineComponent({
  name: "distribution_rules",
  components: {WangEditor},
  data() {
    return {
      editorContent: '<p>初始内容</p>',
      editorConfig: {
        // 自定义上传图片接口
        uploadImgServer: '/api/upload/image',
        uploadFileName: 'file',

        // 自定义工具栏
        toolbarKeys: [
          'head', 'bold', 'italic', 'underline', 'strikeThrough',
          'foreColor', 'backColor', 'link', 'list', 'justify', 'quote',
          'emoticon', 'image', 'table'
        ]
      }
    }
  },
  methods:{
    handleEditorReady(editor) {
      console.log('编辑器就绪:', editor);
      // 可在此处调用编辑器API，如设置字体大小
      // editor.cmd.do('fontSize', 5);
    }
  }
})
</script>

<template>
<div>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/operation/distribution'}">分销分佣</el-breadcrumb-item>
      <el-breadcrumb-item>分销规则</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div style="margin-top: 2%;margin-left: 5%">
    <div>
      推广产品：支持考证（内含培训），名师直播类型的商品分享计分佣
    </div>
    <div>分佣金额：编辑商品信息时设置分佣金额或分佣比例</div>
    <div>结算时间：标记分佣的订单已完成（不可退），即结算佣金并发放</div>
    <div>佣金状态：发放至推广者钱包</div>
    <div>规则说明：向用户介绍这个功能</div>
  </div>
  <WangEditor  v-model="editorContent"
               :editorHeight="'400px'"
               :config="editorConfig"
               @ready="handleEditorReady"
               style="width: 72%;margin-left: 5%"/>
</div>
</template>

<style scoped>

</style>
